<template>
	<view>
		<!-- banner -->
		<swiper class="home-swiper" :indicator-dots="true" :autoplay="true" :interval=2000 :duration=500>
			<swiper-item v-for="item in publicList" :key='item.url'>
				<view class="swiper-item uni-bg-red">
					<image :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 直播课堂 -->
		<uni-title @getTitle="getTitleFun($event)" title1="朝夕名师" title2="在线直播" text1="直播互动学习，感受技术韵律"></uni-title>
		<view class="public-list">
			<view @click="goPublic(i.url,i.text)" v-for="i in publicList" :key="i.url" class="public-box">
				<image :src="i.img" mode="" class="public-img"></image>
				<text class="public-text">{{i.text}}</text>
			</view>
		</view>
		<!-- 讲师招聘 -->
		<uni-title title1="加入" title2="朝夕" text1="让每个人的职业生涯不留遗憾"></uni-title>
		<view class="teacher-list">
			<view class="teacher-box" v-for="item in recruitSmall" :key='item.id'>
				<image :src="item.img" mode=""></image>
				<text class="teacher-text">{{item.text}}</text>
			</view>
		</view>
		<!-- 合作伙伴 -->
		<uni-title title1="合作" title2="伙伴" text1="人生道路上伙伴的支撑不可或缺"></uni-title>
		<view class="buddy-list">
			<image class="buddy-box" v-for="i in buddy" :src="i.img" :key="i.img" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		getPublic,
		getRecruitSmall,
		getBuddy
	} from '../../httpd/index.js'
	export default {
		data() {
			return {
				publicList: [],
				recruitSmall: [],
				buddy: []
			}
		},
		onLoad() {
			getPublic().then(res => {
					this.publicList = [...res.data.data]
				}),
				getRecruitSmall().then(res => {
					this.recruitSmall = [...res.data.data]
				})
			getBuddy().then(res => {
				this.buddy = [...res.data.data]
				console.log(this.buddy)
			})
		},
		methods: {
			getTitleFun(text) {
				console.log(text)
			},
		}
	}
</script>

<style>
	.home-swiper {
		height: 115px;
		margin-bottom: 16px;
	}

	.swiper-item image {
		width: 100%;
		height: 115px;
		/* #ifdef MP */
		height: 120px;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 200px;
		/* #endif */

	}

	.public-list,
	.teacher-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 6px 10px;
	}

	.public-box,
	.teacher-box {
		width: 48%;
		height: 150px;
		margin-bottom: 12px;
		text-align: center;
		overflow: hidden;
		box-shadow: 1px 2px 8px rgba(10, 20, 30, .4);
	}

	.public-box .public-img {
		height: 120px;
		margin-bottom: 4px;
	}

	..public-box .public-text {
		font-size: 16px;
		font-style: oblique;
		color: #2a0b08;
	}

	.teacher-box {
		margin: 10px auto;
		width: 86%;
		height: 270px;
		font-size: 14px;
	}

	.teacher-text {
		display: inline-block;
		margin: 5px;
		width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.buddy-list .buddy-box {
		width: 33%;
		height: 50px;
	}
</style>
